<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>移动端布局</title>
<style>
	*{ margin:0; padding:0; }
	li{ list-style:none; }
	img{ border:none; vertical-align:top; }
	a{ text-decoration:none; }
	#header{ width:100%; height:1.5rem; background:#ff4400;
	   padding:0.375rem 0 0 0.4375rem; box-sizing:border-box; }
	#logo{ float:left; width:0.984375rem; height:0.75rem; 
		background:url(logo.png) no-repeat; background-size:cover; }
	#logo a{ width:100%; height:100%; display:block; 
		text-indent:-156.234375rem; }
	#search{ float:left; width:7.5rem; height:1rem; 
	  background:#d42d00; border-radius:4px; 
	  margin:-0.09375rem 0 0 0.59375rem; font-size:0.46875rem; 
	  line-height:1rem; text-align:center; color:white; }
	#banner{ width:100%; }
	#banner img{ width:100%; }
	#nav ul li{ width:1.15625rem; height:1.640625rem; 
		background:url(icon.jpg) no-repeat center 0; float:left;
		margin:0.3125rem 0 0 0.703125rem; line-height:2.96875rem;	
		text-align:center; color : #666666; font-size:0.3125rem; 
		background-size:contain; }
</style>
</head>
<script>
	var dpr = window.devicePixelRatio;
	var scale = 1/dpr;
 	document.write('<meta name="viewport" content="width=device-width,initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+',user-scalable=no">');
	var fontSize = document.documentElement.clientWidth/10;
	var oHtml = document.getElementsByTagName('html')[0];
	oHtml.style.fontSize = fontSize + 'px';
</script>
<body>
<div id="header">
	<div id="logo">
    	<a href="#">淘宝网</a>
    </div>
    <div id="search">等你一起破浪前行</div>
</div>
<div id="banner">
	<img src="banner.jpg">
</div>
<div id="nav">
	<ul>
        <li>天猫</li>
        <li>天猫</li>
        <li>天猫</li>
        <li>天猫</li>
        <li>天猫</li>
        <li>天猫</li>
        <li>天猫</li>
        <li>天猫</li>
        <li>天猫</li>
        <li>天猫</li>
    </ul>
</div>
</body>
</html>
